<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>操作当当购物车页面</title>
    <link type="text/css" rel="stylesheet" href="css/cartStyle.css" />
</head>
<body>
        <script>
            function gb() {
                if (confirm("确认关闭吗"))window.close()
            }
            function del() {
               let det =document.querySelector(".det")
                let z= det.parentNode.parentNode
                z.remove()
            }
            function collection() {
                confirm()
            }
            function js(){
                let s = document.querySelectorAll(".priceH");
                let sum = 0;
                for (let i = 0; i < s.length; i++) {
                    let m=s[i].innerHTML.substring(1);
                    sum += parseFloat(m)
                }

                let zj = document.getElementById("spz")
                zj.innerHTML = "￥"+ sum

            }

            function subtract(d) {
                let a = d.nextElementSibling
                if (a.value < 1){
                    confirm("已经没了")
                    return;
                }
                a.value -= 1

                let f = d.parentNode
                f.nextElementSibling.innerHTML = "¥" + (f.previousElementSibling.firstElementChild.value*a.value).toFixed(2);

            }

            function add(s){
                let a = s.previousElementSibling
                let p = parseInt(a.value)
                a.value = p+1


               let f = s.parentNode
               f.nextElementSibling.innerHTML = "¥" +( f.previousElementSibling.firstElementChild.value*a.value).toFixed(2);
            }


        </script>

<div class="content">
    <div class="logo">
        <img src="images/dd_logo.jpg"><span onclick="gb()">关闭</span>
    </div>
    <div class="cartList" id="cartList">
        <ul>
            <li>商品图片</li>
            <li>商品信息</li>
            <li>单价</li>
            <li>数量</li>
            <li>总价</li>
            <li>操作</li>
        </ul>
        <ul>
            <li><img src="images/dog.jpg"></li>
            <li>我和狗狗活下来了</li>
            <li>¥<input type="text" name="price" value="21.90"></li>
            <li><input type="button" name="minus" value="-" onclick="subtract(this)"><input type="text" name="amount" value="1"><input type="button" name="plus" value="+" onclick="add(this)"></li>
            <li class="priceH">¥21.90</li>
            <li><p onclick="collection()">移入收藏</p><p onclick="del()" class="det">删除</p></li>
        </ul>
        <ul>
            <li><img src="images/mai.jpg"></li>
            <li>灰霾来了怎么办</li>
            <li>¥<input type="text" name="price" value="24.00"></li>
            <li><input type="button" name="minus" value="-" onclick="subtract(this)"><input type="text" name="amount" value="1"><input type="button" name="plus" value="+" onclick="add(this)"></li>
            <li class="priceH">¥24.00</li>
            <li><p onclick="collection()" >移入收藏</p><p onclick="del()"  class="det">删除</p></li>
        </ul>
        <ol>
            <li id="totalPrice">商品总计：<span id="spz"> </span></li>
            <li><span onclick="js()">结 算</span></li>
        </ol>
    </div>
</div>
</body>
</html>